<template>
	<div id="index">
		<a-layout>
			<a-config-provider :locale="language">
				<a-layout-header>
					<div id="topbar">
						<topBar @loginVisibleShow="getloginData" @registerVisibleShow="getregisterData" :isSearchPage="true">
						</topBar>
					</div>
				</a-layout-header>
				<a-layout-header>
					<div id="search-bar">
						<a-auto-complete :model-value="keyword" :data="hotList.data"
							style="width: 520px;height: 40px;border-radius: 5px;border: 1px solid lightgray;"
							:placeholder="$t('topbarLeftnav.placeholder')" @search="handleSearch" @select="handleSelect">
							<template #suffix>
								<icon-search class="icon black" style="cursor: pointer;border: 1px solid lightgray;
								width: 75px;height: 38px;background-color: #57A9FB;margin-right: -13px;"
								@click="searchbyKeyword(keyword)" />
							</template>
						</a-auto-complete>
					</div>
					<a-card style="width: 80%;margin-left: 10%;" hoverable v-if="searchList.total>0">
						<template #title>
							全部结果（{{searchList.total}}）
						</template>
						<a-space :size="10" direction="vertical" fill>
							<span v-for="(item,index) in searchList.data.length" v-if="isLoading == true">
								<a-skeleton :animation="true">
								<a-skeleton-line :rows="5" />
								<br />
								</a-skeleton>
							</span>
							<a-typography style="margin-bottom: -5%;width: 500px;">
								<a-typography-paragraph>
									<a-space wrap direction="vertical" :size="100" align="start">
										<a-row style="margin-bottom: -25%;" justify="center" v-for="(item,index) in searchList.data"
											:key="index" v-if="isLoading == false">
											<a-col>
												<div style="width: 78px;height: 78px;">
													<a-avatar :size="53" style="background-color: #14C9C9;">
														<img alt="无法显示" style="width: 100%;height: 100%;font-size: 10px;"
															:src="item.avatar" />
													</a-avatar>
												</div>
											</a-col>
											<a-col>
												<a-typography style="margin-left:29%;width: 163px;margin-top: -35%;text-align: left;">
													<a-typography-title
														style="font-weight: bold;font-size: 15px;height: 21px;margin-bottom: 1%;"
														ellipsis>
														{{item.nickName}}
													</a-typography-title>
													<a-typography-paragraph style="font-size: 12px;color: gray;height: auto;">
														{{item.publishTime}}
													</a-typography-paragraph>
													<a-link v-if="item.isModel == 0 || item.isModel == 1" 
													:href="'/modelEvaluating/' + item.mid" :hoverable="false" draggable="false">
														<a-typography-title style="font-weight: bold;font-size: 15px;height: 21px;margin-bottom: 1%;
														width: 900px;" ellipsis>
															{{item.title}}
														</a-typography-title>
														<a-typography-paragraph
															style="font-size: 12px;color: gray;height: auto;width: 900px;" :ellipsis="{
																	        rows: 5
																	      }">
															{{item.content}}
														</a-typography-paragraph>
													</a-link>
													<a-typography-paragraph>
														<a-image-preview-group>
															<a-space :size="30">
																<a-image :src="imageItem"
																	v-for="(imageItem,cIndex) in item.images.slice(0,4)" width="200"
																	height="200" >
																	<template #extra>
																		<a-link :href="'/modelEvaluating/' + item.mid" :hoverable="false" 
																		draggable="false">
																	      <div v-if="cIndex == 3" style="width: 200px;height: 200px;
																		 background-color: rgba(0,0,0,0.45);margin-left: -14%;color: white;">
																				<span style="display: block;height: 200px;text-align: center;
																				line-height: 200px;font-size: 25px;">
																					+{{item.images.length - 4}}
																				</span>
																	      </div>
																		</a-link>
																	</template>
																</a-image>
															</a-space>
														</a-image-preview-group>
													</a-typography-paragraph>
													<a-typography-paragraph>
														<a-space style="color: gray;">
															<icon-eye :size="16" />
															<span>{{item.watch}}</span>&nbsp;
														</a-space>
													</a-typography-paragraph>
													<a-card style="width: 330px;height: 130px;" 
													v-if="item.isModel == '1'">
														<template #actions>
															<span style="margin-top: 70px;">
																<icon-list
																	@click="()=>{router.push({path: '/modelDetail/goods/' + item.mId});}" />
															</span>
														</template>
														<a-card-meta>
															<template #avatar>
																<div style="display: flex;align-items:center;color: #1D2129;">
																	<a-space :size="20">
																		<a-image width="120" height="120" :preview="false" style="margin-top: -26%;margin-left: -10%;"
																			:src="item.src" />
																			<a-typography-paragraph
																				style="width: 150px;margin-left: -15%;" :ellipsis="{
																	        rows: 2
																	      }">
																				{{item.name}}
																			</a-typography-paragraph>
																	</a-space>
																</div>
															</template>
														</a-card-meta>
													</a-card>
													<a-divider style="padding-right: 740px;" />
													<a-typography-title
														style="font-size: 12px;color: gray;height: auto;transform: translateX(250%);"
														v-if="isLastData(index)">
														已经是最后了
													</a-typography-title>
												</a-typography>
											</a-col>
										</a-row>
										<a-pagination :total="searchList.total" show-total show-jumper show-page-size
										:page-size-options="[1,5,10]" @change="changePageList" @page-size-change="changeSizeList"
										:page-size="currentPageSize"
										v-if="searchList.total > 0"/>
									</a-space>
								</a-typography-paragraph>
							</a-typography>
						</a-space>
					</a-card>
					<a-card style="width: 80%;margin-left: 10%;" hoverable v-else-if="searchList.total == 0">
						<template #title>
							全部结果（0）
						</template>
						<a-result :status="null">
							<template #icon>
								<IconFaceFrownFill />
							</template>
							<template #title>这里什么也没有哦</template>
							<template #extra>
								<a-button type="primary" @click="()=>{router.push({path: '/index'});}">前往首页</a-button>
							</template>
						</a-result>
					</a-card>
				</a-layout-header>
				<a-layout-footer>
					<div id="footer">
						<a-back-top :visible-height="10" />
					</div>
				</a-layout-footer>
			</a-config-provider>
		</a-layout>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance,
		onMounted,
		provide,
		watch,
		nextTick,
		inject
	} from 'vue';

	//国际化组件
	import enUS from '@arco-design/web-vue/es/locale/lang/en-us';
	import zhCN from '@arco-design/web-vue/es/locale/lang/zh-cn';

	import topBar from '@/components/index/topBar.vue';

	import apiUrl from '@/constant/user/apiUrl.js';
	import indexApi from '@/module/index/api/index.js';
	import jwt_decode from 'jwt-decode';

	import {
		useRouter
	} from 'vue-router';
	import {
		useRoute
	} from 'vue-router';
	let router = useRouter();
	let route = useRoute();

	let {
		proxy
	} = getCurrentInstance();

	let language = ref(zhCN);

	let loginformVisible = ref(false);
	let registerformVisible = ref(false);

	let userInfo = reactive({});
	let fansList = reactive({});
	let fansTotal = ref(0);
	let tab = ref(0);
	let refrush = ref(0);
	let searchList = reactive({});
	let keyword = ref('');
	let currentPage = ref(1);
	let currentPageSize = ref(10);
	let isLoading = ref(false);
	let hotList = reactive({});
	
	function handleSearch(value) {
		if (value) {
			keyword.value = value;
			console.log("输入时触发",keyword.value);
		} else {
			if(hotList.data){
				keyword.value = '';
				hotList.data.splice(0,hotList.data.length);
			}
		}
	}
	//选择下拉列表时触发
	function handleSelect(value) {
		if (value) {
			keyword.value = value;
			console.log("选择下拉选项时触发",value);
			loadingSearchList();
		} else {
			keyword.value = '';
		}
	}
	watch(()=> keyword.value,(newValue,preValue)=>{
		nextTick(()=>{
			loadingHotList();
		});
	});
	
	function searchbyKeyword(value) {
		if (value) {
			console.log("点击搜索按钮时触发",value);
			loadingSearchList();
			isLoading.value = true;
			setTimeout(()=>{
				isLoading.value = false;
			},500);
			router.push({path: '/search',query:{keyword: keyword.value}});
		} else {
			if(keyword.value == ''){
				proxy.$message.warning('请输入感兴趣的内容!');
			}
			else if(keyword.value == undefined || keyword.value == null){
				proxy.$message.warning('搜索出现错误!');
			}
		}
	}
	
	function changePageList(number){
		console.log('当前页数:',number);
		currentPage.value = number;
		loadingSearchList();
	}
	
	function changeSizeList(number){
		console.log('当前条数:',number);
		currentPageSize.value = number;
		loadingSearchList();
	}
	
	//判断最后一条数据的位置
	function isLastData(index){
		//如果数据总条数比每页条数还小,直接返回
		if(searchList.total <= currentPageSize.value){
			return searchList.total == index+1 ? true:false;
		}
		else if(searchList.total > currentPageSize.value){
			let restPages = searchList.total % currentPageSize.value;
			if(restPages == 0){
				let lastPages = searchList.total / currentPageSize.value;
				if(currentPage.value == lastPages && searchList.data.length-1 == index){
					return true;
				}
			}
			else if(restPages != 0){
				let lastPages = (searchList.total / currentPageSize.value) + 1;
				if(currentPage.value == lastPages && searchList.data.length-1 == index){
					return true;
				}
			}
		}
	}
	
	async function loadingSearchList() {
		searchList.resp = await indexApi.getSearchList({
			"currentPage": currentPage.value,
			"pageSize": currentPageSize.value,
			"queryString": ""
		},keyword.value);
		searchList.data = searchList.resp.data;
		searchList.total = searchList.resp.total;
		console.log('searchList.resp', searchList.resp);
		console.log('searchList', searchList.data);
		return searchList;
	}
	
	async function loadingHotList() {
		hotList.resp = await indexApi.getSearchList({
			"currentPage": currentPage.value,
			"pageSize": currentPageSize.value,
			"queryString": ""
		},keyword.value);
		if(hotList.resp.data != null && hotList.resp.data != undefined){
			hotList.data = hotList.resp.data.map((item,index)=>{
				return item.title;
			});
		}
		hotList.total = hotList.resp.total;
		console.log('hotList.resp', hotList.resp);
		console.log('hotList', hotList.data);
		return hotList;
	}

	function changeLanguage() {
		console.log('当前语言', language.value);
		if (language.value.locale != '' && language.value.locale != null && language.value.locale == 'zh-CN') {
			language.value = enUS;

			proxy.$i18n.locale = 'en';
		} else {
			language.value = zhCN;

			proxy.$i18n.locale = 'zh';
		}
		console.log('切换后语言', language.value);
	}

	function changeThemeColor() {
		if (document.body.getAttribute('arco-theme') == 'dark') {
			document.body.removeAttribute('arco-theme');
			document.documentElement.style.setProperty('--color-content', '#f4f4f4');
			document.documentElement.style.setProperty('--color-content-a', '#4c4c4c');
			document.documentElement.style.setProperty('--color-font', '#4c4c4c');

		} else {
			document.body.setAttribute('arco-theme', 'dark');
			document.documentElement.style.setProperty('--color-content', '#4c4c4c');
			document.documentElement.style.setProperty('--color-content-a', '#f4f4f4');
			document.documentElement.style.setProperty('--color-font', '#f4f4f4');
		}
	}

	function getloginData(data) {
		loginformVisible.value = data;
		console.log('loginVisable', data);
	}

	function getregisterData(data) {
		registerformVisible.value = data;
		console.log('registerVisable', data);
	}

	let addCartGoodStatus = ref(false);
	provide('flushShoppingCart', addCartGoodStatus);
	//获取添加商品的状态
	function getCartGood(data) {
		console.log('status', data);
		addCartGoodStatus.value = data;
	}
	
	function loadKeyword(){
		if(route.query.keyword != '' && route.query.keyword != undefined && route.query.keyword != null){
			keyword.value = route.query.keyword;
			console.log('keyword:'+keyword.value);
		}
	}

	onMounted(() => {
		console.log('user的onMounted执行了');
		document.documentElement.style.setProperty('--color-content', '#f4f4f4');
		document.documentElement.style.setProperty('--color-font', 'gray');
		loadKeyword();
		loadingSearchList();
		loadingHotList();
		console.log('env',
			import.meta.env);
	});
</script>

<style lang="less" scoped>
	@import '@/assets/index/css/search.less';
</style>